<template>
	<view class="pageBox" :style="{ paddingTop: statusBarHeight + 'px'}">
		<view class="swiperBox2">
			<swiper class="swiper2" circular :autoplay="true" :interval="3000" :indicator-dots="true">
				<swiper-item v-for="item in banner" :key="item.id" @click="onSwiperItem(item)">
					<image class="swiper2Img" :src="item.src">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<view class="main flex">
			<view class="left">
				<view class="leftlist">
					<scroll-view scroll-y style="height: 100%;padding-bottom: 20rpx;">
						<view class="leftlistItem flex-center" v-for="(item, index) in leftList" :key="item.id"
							@click="onLeftlistItem(index,item)">
							<view class="leftlistItemText flex-center" :class="{leftAvtive: current === index}">
								{{ item.name }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="right">
				<scroll-view scroll-y style="height: 100%">
					<view class="recommend" v-if="cateId == 0">
						<view class="recommendItem" v-if="manShowList.length">
							<view class="title">
								大家都在看
							</view>
							<view class="showList flex">
								<view class="showListItem flex-center" v-for="item in manShowList" :key="item.id" @click="onRightListItem(item)">
									<image class="showListItemImg" :src="item.thumb"></image>
									<view class="showListItemName">
										{{ item.text }}
									</view>
								</view>
							</view>
						</view>
						<view class="recommendItem" v-if="hotCateList.length">
							<view class="title">
								热门品类
							</view>
							<view class="showList flex">
								<view class="showListItem flex-center" v-for="item in hotCateList" :key="item.id" @click="onRightListItem(item)">
									<image class="showListItemImg" :src="item.thumb"></image>
									<view class="showListItemName">
										{{ item.text }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="rightList flex" v-if="cateId != 0">
						<view class="rightListItem flex-center" v-for="item in rightList" :key="item.id"
							@click="onRightListItem(item)">
							<image class="thumb" :src="item.thumb"></image>
							<view class="name">
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: "",

				banner: [],
				manShowList: [], // 大家都在看
				hotCateList: [], // 热门品类

				current: -1,

				leftList: [{ // 固定死
					id: 0,
					name: "推荐商品",
				}, ],
				cateId: "", // 分类id
				parentId: "", // 分类带的parentId
				rightList: [],

			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;

		},
		onShow() {
			this.getBanner();
			this.getClassifys();
		},
		methods: {
			onSwiperItem(param) {
				if(param.goodsId > 0) {
					uni.navigateTo({
						url: "/home/goodsDetails?id=" + param.goodsId
					})
				}
			},
			getBanner() {
				this.$post({
					module: 'Content',
					interface: 1000,
					data: {
						position_id: 5,
					},
				}).then((res) => {
					this.banner = res.list;
				})
			},
			onLeftlistItem(index, item) {
				this.current = index;
				this.cateId = item.id;
				uni.setStorageSync('cateId', this.cateId);
				this.getRightList(item.children);
			},
			getClassifys() {
				this.$post({
					url: "/portal/Shop",
					module: "Goods",
					interface: "5000",
				}).then(res => {
					// console.log("分类", res)
					this.leftList = [{
						id: 0,
						name: "推荐商品",
					}, ];
					this.leftList = [...this.leftList, ...res.list];
					this.manShowList = res.recommend.manShowList;
					this.hotCateList = res.recommend.hotCateList;
					var i = uni.getStorageSync("cateId");
					this.cateId = i ? i : this.leftList[0].id;
					this.leftList.forEach((item, index) => {
						if (item.id == this.cateId) {
							if (item.id != 0) {
								this.onLeftlistItem(index, this.leftList[index]);
							} else {
								this.current = 0;
							}

						}
					})
				})
			},
			getRightList(children) {
				this.rightList = children;
			},
			onRightListItem(item) {
				// this.parentId = item.id;
				// uni.navigateTo({
				// 	url: `/home/goodsList?cateId=${this.cateId}&parentId=${this.parentId}`
				// })
				uni.navigateTo({
					url: `/home/goodsList?cateId=${item.id}`
				})
			}
		},


	}
</script>

<style scoped lang="scss">
	.pageBox {
		overflow: hidden;
		width: 100%;
		height: calc(100vh - var(--window-bottom));
	}

	.swiperBox2 {
		width: 100%;
		margin-bottom: 22rpx;

		.swiper2 {
			width: 100%;
			height: 358rpx;

			.swiper2Img {
				width: 100%;
				height: 358rpx;
			}

			/deep/.uni-swiper-dot {
				width: 6rpx;
				height: 6rpx;
				border-radius: 50%;
			}
		}
	}

	.main {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - 358rpx - 22rpx);
		overflow: hidden;

		.left {
			width: 24%;
			height: calc(100vh - var(--window-bottom) - 358rpx - 22rpx);
			overflow: hidden;
			position: fixed;
			/*  #ifdef  H5  */
			top: 358rpx;
			/*  #endif  */
			/*  #ifdef  APP-PLUS  */
			top: calc(358rpx + 22rpx + 40rpx);
			/*  #endif  */
			left: 0;
			z-index: 9;

			.leftlist {
				width: 100%;
				height: 100%;
				overflow-y: auto;


				.leftlistItem {
					width: 100%;
					height: 74rpx;
					background-color: #ffffff;
					padding: 0 20rpx;

					.leftlistItemText {
						width: 100%;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						background-color: #ffffff;

						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}

					.leftAvtive {
						background-color: #EC615C;
						color: #ffffff;
					}

				}


			}

		}

		.right {
			margin-left: auto;
			width: 76%;
			height: 100%;
			overflow: hidden;

			.recommend {
				width: 100%;
				height: 100%;
				padding: 0 32rpx 32rpx;
				overflow-y: auto;

				.recommendItem {
					.title {
						font-size: 36rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-bottom: 16rpx;
					}

					.showList {
						flex-wrap: wrap;

						.showListItem {
							width: 33.33%;
							flex-direction: column;
							margin-bottom: 30rpx;

							.showListItemImg {
								width: 160rpx;
								height: 160rpx;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
							}

							.showListItemName {
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #000000;
								line-height: 40rpx;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: center;
								margin-top: 16rpx;
							}
						}
					}
				}
			}

			.rightList {
				width: 100%;
				padding: 0 32rpx 32rpx;
				overflow-y: auto;
				flex-wrap: wrap;



				.rightListItem {
					width: 33.33%;
					flex-direction: column;
					margin-bottom: 30rpx;

					.thumb {
						width: 160rpx;
						height: 160rpx;

						border-radius: 24rpx 24rpx 24rpx 24rpx;
					}

					.name {
						font-size: 20rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						text-align: center;
						margin-top: 16rpx;
					}
				}
			}
		}

	}
</style>
